<template>
    <div>
        <el-divider content-position="center"><span style="font-size: 15px;color: #ff006e;font-weight: bold">我的疫苗申请</span></el-divider>
        <div>
            <el-table stripe size="mini" :data="ApplyVaccineList.slice((currentPage-1)*pageSize,currentPage*pageSize)">
                <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                <el-table-column label="ID" prop="applyid" min-width="50%" align="center"></el-table-column>
                <el-table-column label="申请人" prop="applyname" align="center"></el-table-column>
                <el-table-column label="疫苗名称" prop="avname" align="center"></el-table-column>
                <el-table-column label="申请时间" prop="applytime" align="center"></el-table-column>
                <el-table-column label="接种时间" prop="vtime" align="center"></el-table-column>
                <el-table-column label="接种地点" prop="vaddress" align="center"></el-table-column>
                <!--<el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                plain
                                @click="delectApplyVaccine(scope.row.vid)">删除记录</el-button>
                        &lt;!&ndash;scope.$index→拿到每一行的index;scope.$row→拿到每一行的数据&ndash;&gt;
                    </template>
                </el-table-column>-->
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           small
                           background
                           :page-sizes="[2,3,5,10]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper" :total="ApplyVaccineList.length">
            </el-pagination>
        </div>
        <el-divider  content-position="center"><span style="font-size: 15px;color: #ff006d;font-weight: bold">防疫物资申请</span></el-divider>
        <div>
            <el-table stripe size="mini" :data="AllRecordById.slice((currentPage1-1)*pageSize1,currentPage1*pageSize1)">
                <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
                <el-table-column label="申请人" prop="uname" align="center"></el-table-column>
                <el-table-column label="申请物资" prop="goodsname" align="center"></el-table-column>
                <el-table-column label="申请时间" prop="recordtime" align="center"></el-table-column>
                <el-table-column label="申请数量" prop="num" align="center"></el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1"
                           :current-page="currentPage1"
                           small
                           background
                           :page-sizes="[2,3,5,10]" :page-size="pageSize1"
                           layout="total, sizes, prev, pager, next, jumper" :total="AllRecordById.length">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "application",
        data() {
            return {
                uid: "",
                ApplyVaccineList: [],
                AllRecordById:[],
                currentPage: 1, // 当前页码
                total: 20, // 总条数
                pageSize: 2,// 每页的数据条数

                currentPage1: 1, // 当前页码
                pageSize1: 3,// 每页的数据条数
            }
        },
        created() {
            this.uid = window.sessionStorage.getItem('uid')
            this.getApplyVaccineList()
            this.getAllRecordById()
        },
        methods: {
            async getApplyVaccineList() {
                const {data: res} = await this.$http.get("getApplyVaccineList?vuid=" + this.uid);
                console.log(res);
                this.ApplyVaccineList = res.getApplyVaccineByUid;
            },
            async getAllRecordById() {
                const {data: res} = await this.$http.get("getAllRecordById?uid=" + this.uid);
                console.log(res);
                this.AllRecordById = res;
            },
            /* 分页功能的实现 */
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage = 1;
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
            },
            handleSizeChange1(val) {
                console.log(`每页 ${val} 条`);
                this.currentPage1 = 1;
                this.pageSize1 = val;
            },
            handleCurrentChange1(val) {
                console.log(`当前页: ${val}`);
                this.currentPage1 = val;
            },
        }
    }
</script>

<style scoped>
    .el-pagination{
        display:flex;
        align-items:center;
        justify-content:center;
    }
    /*分割线样式*/
    .el-divider--horizontal {
        margin: 20px 0;
        background: 0 0;
        border-top: 5px;
    }
</style>